<template>
  <div class="statistics-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>统计分析</h2>
      <p>查看论文查重系统的使用统计和分析数据</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-cards">
      <el-col :lg="6" :md="12" :sm="24">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#409EFF">
                <User />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.totalStudents }}</div>
              <div class="stat-label">注册学生</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#67C23A">
                <Document />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.totalSubmissions }}</div>
              <div class="stat-label">总提交数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#E6A23C">
                <Warning />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.highRiskCount }}</div>
              <div class="stat-label">高风险论文</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="32" color="#F56C6C">
                <TrendCharts />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.avgSimilarity }}%</div>
              <div class="stat-label">平均重复率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 筛选条件 -->
    <el-card class="filter-card" shadow="hover">
      <el-form
        ref="filterFormRef"
        :model="filterForm"
        :inline="true"
        class="filter-form"
      >
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button size="small" @click="setDateRange(7)">近7天</el-button>
            <el-button size="small" @click="setDateRange(30)">近30天</el-button>
            <el-button size="small" @click="setDateRange(90)">近3个月</el-button>
          </el-button-group>
        </el-form-item>
        <el-form-item label="查重类型">
          <el-select
            v-model="filterForm.checkType"
            placeholder="请选择查重类型"
            clearable
            style="width: 150px"
          >
            <el-option label="全部" value="" />
            <el-option label="题目查重" value="title" />
            <el-option label="论文查重" value="paper" />
            <el-option label="信息提取" value="extraction" />
          </el-select>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select
            v-model="filterForm.riskLevel"
            placeholder="请选择风险等级"
            clearable
            style="width: 150px"
          >
            <el-option label="全部" value="" />
            <el-option label="低风险" value="low" />
            <el-option label="中风险" value="medium" />
            <el-option label="高风险" value="high" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleResetFilter">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图表区域 -->
    <el-row :gutter="24" class="charts-section">
      <!-- 提交趋势图 -->
      <el-col :lg="12" :md="24">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#409EFF">
                <TrendCharts />
              </el-icon>
              <span>提交趋势</span>
            </div>
          </template>
          <div ref="trendChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 风险等级分布 -->
      <el-col :lg="12" :md="24">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#67C23A">
                <PieChart />
              </el-icon>
              <span>风险等级分布</span>
            </div>
          </template>
          <div ref="pieChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="charts-section">
      <!-- 查重类型统计 -->
      <el-col :lg="12" :md="24">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#E6A23C">
                <Histogram />
              </el-icon>
              <span>查重类型统计</span>
            </div>
          </template>
          <div ref="barChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 重复率分布 -->
      <el-col :lg="12" :md="24">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#F56C6C">
                <DataAnalysis />
              </el-icon>
              <span>重复率分布</span>
            </div>
          </template>
          <div ref="histogramChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细统计表格 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon size="20" color="#909399">
            <List />
          </el-icon>
          <span>详细统计</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleExport">
              <el-icon><Download /></el-icon>
              导出报告
            </el-button>
            <el-button @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <DataTable
        :data="tableData"
        :columns="tableColumns"
        :loading="tableLoading"
        :pagination="pagination"
        :show-selection="false"
        :show-index="true"
        empty-text="暂无统计数据"
        @page-change="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import {
  User,
  Document,
  Warning,
  TrendCharts,
  PieChart,
  Histogram,
  DataAnalysis,
  List,
  Search,
  Refresh,
  Download
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import { useAppStore } from '@/stores/app'
import { getOverviewStatistics, getTrendStatistics, getStudentActivity } from '@/api/teacher'
import { formatDateTime } from '@/utils'
import DataTable from '@/components/DataTable.vue'

const appStore = useAppStore()

// 筛选表单
const filterFormRef = ref()
const filterForm = reactive({
  dateRange: [],
  checkType: '',
  riskLevel: ''
})

// 统计数据
const statistics = reactive({
  totalStudents: 0,
  totalSubmissions: 0,
  highRiskCount: 0,
  avgSimilarity: 0
})

// 图表引用
const trendChartRef = ref()
const pieChartRef = ref()
const barChartRef = ref()
const histogramChartRef = ref()

// 表格数据
const tableData = ref([])
const tableLoading = ref(false)
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 表格列配置
const tableColumns = [
  {
    prop: 'date',
    label: '日期',
    width: 120
  },
  {
    prop: 'submissions',
    label: '提交次数',
    width: 100
  },
  {
    prop: 'completedSubmissions',
    label: '完成次数',
    width: 100
  },
  {
    prop: 'avgSimilarity',
    label: '平均重复率',
    width: 120,
    formatter: (value) => `${value}%`
  }
]

// 筛选
const handleFilter = () => {
  pagination.current = 1
  loadData()
}

// 重置筛选
const handleResetFilter = () => {
  if (filterFormRef.value) {
    filterFormRef.value.resetFields()
  }
  pagination.current = 1
  loadData()
}

// 设置日期范围
const setDateRange = (days) => {
  const endDate = new Date()
  const startDate = new Date()
  startDate.setDate(startDate.getDate() - days + 1)
  
  filterForm.dateRange = [
    startDate.toISOString().split('T')[0],
    endDate.toISOString().split('T')[0]
  ]
  
  // 自动触发查询
  handleFilter()
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    const params = {
      startDate: filterForm.dateRange?.[0],
      endDate: filterForm.dateRange?.[1]
    }
    
    const result = await getOverviewStatistics(params)
    
    // 使用正确的数据结构
    const basicStats = result.basicStats || {}
    const riskAnalysis = result.riskAnalysis || {}
    
    statistics.totalStudents = basicStats.totalStudents || 0
    statistics.totalSubmissions = basicStats.totalSubmissions || 0
    statistics.highRiskCount = riskAnalysis.highRisk?.count || 0
    statistics.avgSimilarity = basicStats.avgSimilarity || 0
  } catch (error) {
    console.error('加载统计数据失败:', error)
    ElMessage.error('加载数据失败')
  }
}

// 加载表格数据
const loadTableData = async () => {
  try {
    tableLoading.value = true
    
    const params = {
      period: 'day',
      days: 30
    }
    
    const result = await getTrendStatistics(params)
    
    // 转换趋势数据为表格数据
    if (result.submissionTrends && Array.isArray(result.submissionTrends)) {
      tableData.value = result.submissionTrends.map(item => ({
        date: item.date || '',
        titleCheckCount: item.titleCheckCount || 0,
        paperCheckCount: item.paperCheckCount || 0,
        extractionCount: item.extractionCount || 0,
        totalCount: (item.titleCheckCount || 0) + (item.paperCheckCount || 0) + (item.extractionCount || 0),
        avgSimilarity: item.avgSimilarity || 0,
        highRiskCount: item.highRiskCount || 0
      }))
      pagination.total = tableData.value.length
    } else {
      tableData.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('加载表格数据失败:', error)
    ElMessage.error('加载表格数据失败')
  } finally {
    tableLoading.value = false
  }
}

// 加载所有数据
const loadData = async () => {
  try {
    // 获取所有统计数据
    const [overviewResult, trendResult, activityResult] = await Promise.all([
      getOverviewStatistics({
        startDate: filterForm.dateRange?.[0],
        endDate: filterForm.dateRange?.[1]
      }),
      getTrendStatistics({ period: 'day', days: 30 }),
      getStudentActivity()
    ])
    
    // 处理统计数据
    const overviewData = overviewResult.data || overviewResult;
    const trendData = trendResult.data || trendResult;
    const activityData = activityResult.data || activityResult;
    
    // 更新统计卡片
    updateStatistics(overviewData);
    
    // 更新表格数据
    updateTableData(trendData);
    
    // 等待DOM更新后初始化图表
    await nextTick();
    
    // 使用真实数据更新图表
    updateCharts(overviewData, trendData, activityData);
  } catch (error) {
    console.error('加载数据失败:', error);
    ElMessage.error('加载数据失败');
  }
}

// 刷新数据
const refreshData = () => {
  loadData()
}

// 使用真实数据更新图表
const updateCharts = (overviewData, trendData, activityData) => {
  updateTrendChart(trendData);
  updatePieChart(overviewData);
  updateBarChart(overviewData);
  updateHistogramChart(overviewData);
}

// 更新统计卡片
const updateStatistics = (data) => {
  if (data.basicStats) {
    statistics.totalStudents = data.basicStats.totalStudents || 0;
    statistics.totalSubmissions = data.basicStats.totalSubmissions || 0;
    statistics.avgSimilarity = data.basicStats.avgSimilarity || 0;
  }
  
  if (data.riskAnalysis && data.riskAnalysis.highRisk) {
    statistics.highRiskCount = data.riskAnalysis.highRisk.count || 0;
  }
}

// 更新表格数据
const updateTableData = (trendData) => {
  if (trendData.submissionTrends && Array.isArray(trendData.submissionTrends)) {
    tableData.value = trendData.submissionTrends.map(item => ({
      date: item.date || '',
      submissions: item.submissions || 0,
      completedSubmissions: item.completedSubmissions || 0,
      avgSimilarity: item.avgSimilarity || 0
    }));
    pagination.total = tableData.value.length;
  } else {
    tableData.value = [];
    pagination.total = 0;
  }
}

// 更新提交趋势图
const updateTrendChart = (trendData) => {
  if (!trendChartRef.value) return
  
  const chart = echarts.init(trendChartRef.value)
  
  // 使用真实数据
  let dates = [];
  let submissionData = [];
  
  if (trendData.submissionTrends && Array.isArray(trendData.submissionTrends)) {
    dates = trendData.submissionTrends.map(item => item.date || '');
    submissionData = trendData.submissionTrends.map(item => item.submissions || 0);
  }
  
  const option = {
    title: {
      text: '提交趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['提交次数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '提交次数',
        type: 'line',
        stack: '总量',
        data: submissionData,
        smooth: true
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 更新风险等级分布饼图
const updatePieChart = (overviewData) => {
  if (!pieChartRef.value) return
  
  const chart = echarts.init(pieChartRef.value)
  
  // 使用真实数据
  let riskData = [
    { value: 0, name: '低风险' },
    { value: 0, name: '中风险' },
    { value: 0, name: '高风险' }
  ];
  
  if (overviewData.riskAnalysis) {
    const riskAnalysis = overviewData.riskAnalysis;
    riskData = [
      { value: riskAnalysis.lowRisk?.count || 0, name: '低风险' },
      { value: riskAnalysis.mediumRisk?.count || 0, name: '中风险' },
      { value: riskAnalysis.highRisk?.count || 0, name: '高风险' }
    ];
  }
  
  const option = {
    title: {
      text: '风险等级分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '风险等级',
        type: 'pie',
        radius: '50%',
        data: riskData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 更新查重类型统计柱状图
const updateBarChart = (overviewData) => {
  if (!barChartRef.value) return
  
  const chart = echarts.init(barChartRef.value)
  
  // 使用真实数据
  let classData = [];
  let submissionCounts = [];
  
  if (overviewData.classDistribution && Array.isArray(overviewData.classDistribution)) {
    classData = overviewData.classDistribution.map(item => item.className || '');
    submissionCounts = overviewData.classDistribution.map(item => item.submissionCount || 0);
  }
  
  const option = {
    title: {
      text: '班级提交统计'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['提交次数']
    },
    xAxis: {
      type: 'category',
      data: classData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '提交次数',
        type: 'bar',
        data: submissionCounts,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 更新重复率分布直方图
const updateHistogramChart = (overviewData) => {
  if (!histogramChartRef.value) return
  
  const chart = echarts.init(histogramChartRef.value)
  
  // 使用真实数据 - 专业分布
  let majorNames = [];
  let studentCounts = [];
  
  if (overviewData.majorDistribution && Array.isArray(overviewData.majorDistribution)) {
    majorNames = overviewData.majorDistribution.map(item => item.major || '');
    studentCounts = overviewData.majorDistribution.map(item => item.studentCount || 0);
  }
  
  const option = {
    title: {
      text: '专业分布'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: majorNames
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '学生数量',
        type: 'bar',
        data: studentCounts,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 分页变化
const handlePageChange = (page) => {
  pagination.current = page
  loadTableData()
}

// 导出报告
const handleExport = async () => {
  try {
    ElMessage.info('正在导出报告...')
    
    // 构造导出数据
    let exportData = '日期,提交次数,完成次数,平均重复率\n';
    
    // 添加表格数据
    tableData.value.forEach(item => {
      exportData += `${item.date || ''},${item.submissions || 0},${item.completedSubmissions || 0},${item.avgSimilarity || 0}%\n`;
    });
    
    // 创建Blob对象
    const blob = new Blob(['\uFEFF' + exportData], { 
      type: 'text/csv;charset=utf-8;'
    });
    
    // 创建下载链接
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `统计分析报告_${new Date().toISOString().slice(0, 10)}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    ElMessage.success('报告导出成功')
  } catch (error) {
    console.error('导出报告失败:', error)
    ElMessage.error('报告导出失败')
  }
}

// 初始化图表
const initCharts = () => {
  initTrendChart()
  initPieChart()
  initBarChart()
  initHistogramChart()
}

// 提交趋势图
const initTrendChart = () => {
  if (!trendChartRef.value) return
  
  const chart = echarts.init(trendChartRef.value)
  
  // 示例数据，实际应该从API获取
  const dates = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  const titleData = [120, 132, 101, 134, 90, 230, 210]
  const paperData = [220, 182, 191, 234, 290, 330, 310]
  const extractionData = [150, 232, 201, 154, 190, 330, 410]
  
  const option = {
    title: {
      text: '提交趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['题目查重', '论文查重', '信息提取']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '题目查重',
        type: 'line',
        stack: '总量',
        data: titleData
      },
      {
        name: '论文查重',
        type: 'line',
        stack: '总量',
        data: paperData
      },
      {
        name: '信息提取',
        type: 'line',
        stack: '总量',
        data: extractionData
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 风险等级分布饼图
const initPieChart = () => {
  if (!pieChartRef.value) return
  
  const chart = echarts.init(pieChartRef.value)
  
  const option = {
    title: {
      text: '风险等级分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '风险等级',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '低风险' },
          { value: 735, name: '中风险' },
          { value: 580, name: '高风险' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 查重类型统计柱状图
const initBarChart = () => {
  if (!barChartRef.value) return
  
  const chart = echarts.init(barChartRef.value)
  
  const option = {
    title: {
      text: '查重类型统计'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['提交次数']
    },
    xAxis: {
      type: 'category',
      data: ['题目查重', '论文查重', '信息提取']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '提交次数',
        type: 'bar',
        data: [120, 200, 150],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 重复率分布直方图
const initHistogramChart = () => {
  if (!histogramChartRef.value) return
  
  const chart = echarts.init(histogramChartRef.value)
  
  // 生成示例数据
  const data = []
  for (let i = 0; i < 100; i++) {
    data.push(Math.random() * 100)
  }
  
  const option = {
    title: {
      text: '重复率分布'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value
      }
    },
    xAxis: {
      type: 'category',
      data: ['0-10%', '10-20%', '20-30%', '30-40%', '40-50%', '50-60%', '60-70%', '70-80%', '80-90%', '90-100%']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '论文数量',
        type: 'bar',
        data: [10, 15, 20, 25, 30, 28, 22, 18, 12, 8],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

onMounted(() => {
  appStore.setPageTitle('统计分析')
  appStore.setBreadcrumbs([
    { title: '教师管理', path: '/teacher' },
    { title: '统计分析', path: '/teacher/statistics' }
  ])
  
  loadData()
})
</script>

<style scoped>
.statistics-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

/* 统计卡片 */
.stats-cards {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 12px;
  border: none;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 筛选卡片 */
.filter-card {
  margin-bottom: 24px;
  border-radius: 12px;
  border: none;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 24px;
}

.chart-card {
  border-radius: 12px;
  border: none;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.chart-container {
  width: 100%;
  height: 300px;
}

/* 表格卡片 */
.table-card {
  border-radius: 12px;
  border: none;
}

.header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-form {
    flex-direction: column;
  }
  
  .header-actions {
    margin-left: 0;
    margin-top: 16px;
  }
  
  .stat-content {
    flex-direction: column;
    text-align: center;
  }
  
  .chart-container {
    height: 250px;
  }
}
</style>
